<!-- 热区组件 -->
<template>
	<view class="me-area-item" :class="{'active': cur._id == area._id}" :_id="area._id" :style="{width: area.w+'px', height: area.h+'px', top: area.top+'px', left: area.left+'px'}" @click="doClick">
		<view class="area-no">{{no+1}}</view>
		<view class="btn-del uni-icons-closeempty" @click.stop="del"></view>
		<view class="btn-pull"></view>
	</view>
</template>

<script>
	export default {
		props:{
			area: Object, // 热区数据
			cur: Object, // 选中的热区
			no: Number
		},
		methods:{
			doClick(){
				this.$emit('click', this.area)
			},
			del(){
				this.$emit('del')
			}
		}
	}
</script>

<style lang="scss">
	.me-area-item{
		position: absolute;
		border: 1px solid rgba($color: #000, $alpha: .35);
		background-color: rgba($color: #000, $alpha: .1);
		cursor: move;
		&.active{
			background-color: rgba($color: $uni-color-primary, $alpha: .35);
		}
		.btn-del{
			position: absolute;
			right: -1px;
			top: -1px;
			width: 12px;
			height: 12px;
			line-height: 11px;
			text-align: center;
			border: 1px solid rgba($color: #000, $alpha: .35);
			background-color: #fff;
			font-size: 10px;
			color: #000;
			cursor: pointer;
		}
		.btn-pull{
			position: absolute;
			right: -1px;
			bottom: -1px;
			width: 12px;
			height: 12px;
			border: 1px solid rgba($color: #000, $alpha: .35);
			background-color: #fff;
			cursor: se-resize;
		}
		.area-no{
			position: absolute;
			top: 0;
			left: 0;
			font-size: 10px;
			background-color: #fff;
			width: 12px;
			height: 12px;
			line-height: 12px;
			text-align: center;
		}
	}
</style>
